<template>
	<view class="content">
		<view class="list-block">
			<view v-for="(item,index) in position" :key="item.id" @click="checkItem(item.id)" class="list-item">
				<checkbox-group>
					<checkbox :checked="checkPosition.includes(item.id)" color="#FF7626" class="checkbox"></checkbox>
				</checkbox-group>
				<view class="info-block">
					<view class="title">{{item.jobTitle}}</view>
					<view class="address">{{item.jobAddress}}</view>
					<view class="label-block">
						<view v-for="(item1,index1) in item.welfare" :key="index1" class="label-item">{{item1}}</view>
					</view>
					<view class="wage" v-if="item.minSalary">{{item.minSalary}}-{{item.maxSalary}}<text class="unit">元</text></view>
					<view class="wage" v-else>面议</view>
				</view>
			</view>
		</view>
		<view class="btn-block">
			<checkbox-group>
				<checkbox color="#FF7626" :checked="isAll" @click="checkAll" id="checkAll">
					<label for="checkAll">全选</label>
				</checkbox>
			</checkbox-group>
			<view @click="handleSave" class="btn">确定</view>
		</view>
	</view>
</template>

<script>
	import {
		getStorage,setStorage
	} from '@/util/auth.js'
	import {multipleChoiceChange} from '@/util/util.js'
	import {
		getEnterprisePubById
	} from '@/api/live.js';
	export default {
		data() {
			return {
				checkPosition:[],
				position: [],
				id: null,
				isAll:false
			}
		},
		watch:{
			checkPosition:{
				handler(){
					this.isAll=this.position.length==this.checkPosition.length
				},
				immediate:true
			},
			position:{
				handler(){
					this.isAll=this.position.length==this.checkPosition.length
				},
				immediate:true
			}
		},
		methods: {
			handleSave(){
				let storage=getStorage('positionData');
				storage=storage?storage:{};
				storage[this.id]=this.checkPosition;
				if(storage[this.id].length==0){
					delete storage[this.id]
				}
				setStorage('positionData',storage);
				uni.navigateBack();
			},
			checkItem(id){
				this.checkPosition=multipleChoiceChange(this.checkPosition,id);
			},
			checkAll(){
				const length=this.checkPosition.length;
				this.checkPosition=[];
				if(length!=this.position.length){
					for(let i=0;i<this.position.length;i++){
						this.checkPosition.push(this.position[i].id)
					}
				}
			},
			getList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getEnterprisePubById({
					comId: this.id
				}).then((res) => {
					uni.hideLoading();
					this.position = res;
				}).catch((res) => {
					uni.hideLoading();
					this.showToast('加载失败，请重试');
				})
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.getList()
			this.imageUrl = this.globalConfig.imageUrl;
			let storage=getStorage('positionData');
			storage=storage?storage:{};
			this.checkPosition=storage[this.id]?storage[this.id]:[];
		}
	}
</script>

<style lang="scss">
	page{
		height: 100vh;
		background-color: #FAFAFA;
	}
	.content {
		.list-block{
			padding-bottom: 130rpx;
			.list-item{
				display: flex;
				flex-direction: row;
				padding: 30rpx;
				background: #fff;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				.checkbox{
					margin-right: 30rpx;
				}
				.info-block{
					width: calc(100% - 90rpx);
					display: flex;
					flex-direction: column;
					.title{
						font-size: 32rpx;
						font-weight: bold;
					}
					.address{
						font-size: 28rpx;
						color: #999;
						margin-top: 16rpx;
					}
					.title,.address,.wage{
						overflow:hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.label-block {
						font-size: 24rpx;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: left;
						margin-top: 16rpx;
					
						.label-item {
							padding: 8rpx 20rpx;
							background: #F5F6F8;
							color: #999;
							margin: 0 10rpx 20rpx 0;
						}
					}
					.wage {
						color: #FE7526;
						font-size: 36rpx;
						font-weight: bold;
						display: flex;
						flex-direction: row;
						align-items: center;
						.unit {
							font-size: 28rpx;
							font-weight: normal;
						}
					}
				}
			}
		}
		.btn-block{
			position: fixed;
			bottom: 0;
			left: 0;
			background: #fff;
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 130rpx;
			width: 100%;
			padding: 0 30rpx;
			box-shadow:0px -1px 10px 0 #efefef;
			.btn{
				flex-grow: 1;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				background: #FE7526;
				border-radius: 40rpx;
				font-size: 28rpx;
				margin-left: 20rpx;
			}
			#checkAll{
				flex-grow: 0;
				margin-left: 40rpx;
			}
			label{
				margin:0 20rpx;
			}
			
		}
	}
</style>
